<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 测试二维码绘制功能实现 -->
      <!-- <div class="canvas">
        <canvas ref="canv" />
      </div> -->
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
          <PageTools>
            <!-- 插入到left插槽位置 -->
            <template #left>
              <span>总记录数：{{ total }}条</span>
            </template>
            <!-- 插入到right插槽位置 -->
            <template #right>
              <el-button
                type="warning"
                size="small"
                @click="$router.push('/import')"
              >
                导入excel
              </el-button>
              <el-button type="danger" size="small" @click="exportList">
                导出excel
              </el-button>
              <el-button
                v-if="checkPoints('p-em-add')"
                type="primary"
                size="small"
                @click="isShowDialog = true"
              >
                新增员工
              </el-button>
            </template>
          </PageTools>
        </div>
        <div>
          <!-- table列表 -->
          <el-table
            border
            :data="employees"
            :default-sort="{ prop: 'workNumber', order: 'ascending' }"
          >
            <el-table-column type="index" label="序号" />
            <el-table-column prop="username" label="姓名" />
            <el-table-column label="头像">
              <template #default="{ row }">
                <el-image
                  class="round"
                  :src="row.staffPhoto"
                  fit="fill"
                  @click="darwQrcode(row.staffPhoto)"
                >
                  <!-- <div slot="error" class="image-slot">没有头像</div> -->
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="workNumber" label="工号" />
            <el-table-column prop="formOfEmployment" label="聘用形式">
              <!-- 作用域插槽 -->
              <template #default="{ row }">
                <span> {{ formatEmployment(row.formOfEmployment) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="departmentName" label="部门" />
            <el-table-column sortable prop="timeOfEntry" label="入职时间" />
            <el-table-column label="账户状态">
              <el-switch v-model="actived"> </el-switch>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="280">
              <template #default="{ row }">
                <el-button
                  type="text"
                  size="small"
                  @click="$router.push(`/employees/detail/${row.id}`)"
                >
                  查看
                </el-button>
                <el-button type="text" size="small" @click="assingRole(row.id)">
                  分配角色
                </el-button>
                <el-button type="text" size="small" @click="delPerson(row.id)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 60px"
          >
            <el-pagination
              :total="total"
              :current-page="pages.page"
              :page-size="pages.size"
              :page-sizes="[10, 2]"
              layout="prev, pager, next,sizes"
              @current-change="changePage"
              @size-change="sizeChange"
            />
          </el-row>
        </div>
      </el-card>
    </div>
    <!-- 新增员工 -->
    <AddEmployee :is-show-dialog.sync="isShowDialog" />
    <!-- 绘制员工头像二维码 -->
    <Qrcode :is-show.sync="isShow" :data="qrcodeData" />
    <!-- 给员工分配角色弹层 -->
    <AssingRole ref="arole" :show-assing-role.sync="showAssingRole" />
  </div>
</template>

<script>
import { getEmployeeList, delEmployee } from '@/api/employees'
// 导入数据字典
import Els from '@/api/constant/employees'
// 导入新增人员弹层
import AddEmployee from './components/add-employee'
// 导入绘制二维码插件
// import Qrcode from 'qrcode'
import AssingRole from './components/assign-role'
export default {
  components: {
    AddEmployee,
    AssingRole
  },
  data () {
    return {
      // 控制角色授予弹层
      showAssingRole: false,
      // 控制二维码弹层
      isShow: false,
      // 二维码绘制存储的数据
      qrcodeData: '',
      // 控制新增弹层显示
      isShowDialog: false,
      // 人员列表数据
      employees: [],
      // 分页数据
      pages: {
        page: 1, // 页码
        size: 10 // 每页多少条数据
      },
      total: 0, // 总条数
      actived: true
      // Els // 数据渲染
    }
  },
  created () {
    this.getList()
  },
  // mounted () {
  //   // 绘制二维码
  //   // 绘制二维码使用场景：1. 可以收钱 2. 存储数据（展现）
  //   Qrcode.toCanvas(this.$refs.canv, 'https://hrsass-1255477649.cos.ap-beijing.myqcloud.com/m1.jpeg', (err) => {
  //     if (err) {
  //       return console.log('绘制失败了！')
  //     }
  //     console.log('绘制成功！')
  //   })
  // },
  methods: {
    // 给员工分配角色
    // id 员工ID
    assingRole (id) {
      this.showAssingRole = true
      // 调用子组件方法获取选择过的角色数据=》回显
      this.$refs.arole.getSelectedRole(id)
    },
    // 绘制二维码
    darwQrcode (url) {
      // 存储绘制数据
      this.qrcodeData = url
      // 打开弹层
      this.isShow = true
    },
    // 导出指定页的数据
    async exportList () {
      /**
       * import方法
       * 说明：是webpack提供的方法=》需要安装script-loader插件
       * 作用：按需导入js模块
       */
      const excel = await import('@/utils/Export2Excel')
      console.log('获取js模块中对外导出的方法：', excel)
      // 需要导出数据的映射关系=》注意：跟后台返回数据字段顺序保持一致
      const ships = {
        '手机号': 'mobile',
        '姓名': 'username',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '工号': 'workNumber',
        '转正日期': 'correctionTime',
        '部门': 'departmentName'
      }
      // 例子：
      // 表头
      const header = Object.keys(ships) // ['姓名', '年龄', '工资']
      // 数据(二维数组)
      const data = this.transformExcelData(this.employees, Object.values(ships))
      console.log('二维数组：', data)
      // [
      //   ['刘备', '40', 10000],
      //   ['关羽', '39', 9000],
      //   ['张飞', '38', 8000]
      // ]
      // 调用模块中方法导出json数据
      excel.export_json_to_excel({
        header, // excel导出的表头
        data, // excel导出的数据
        filename: '员工信息', // 导出Excel文件名
        autoWidth: true, // 导出Excel数据列的宽度自适应
        bookType: 'xlsx' // 导出文件类型
      })
    },
    // 转换导出当前页数据的二维数组
    /**
     * @params list 当前页的员工数据
     * @params headers 导出的字段（过滤使用) =》 ['mobile','username',...]
     * 思路步骤：
     * 1. 准备空数组存储结果
     * 2. 循环遍历数据放入二维数组
     * 3. 返回转换结果
     */
    transformExcelData (list, headers) {
      const parentArray = []
      list.forEach(item => {
        // item 员工信息对象
        const childArray = []
        for (const key in item) {
          // 根据header过滤需要导出的字段
          if (headers.includes(key)) {
            // 格式化聘用形式=》转换 1（正式） | 2（非正式）
            if (key === 'formOfEmployment') {
              childArray.push(this.formatEmployment(item[key]))
            } else {
              // 存在加入值
              childArray.push(item[key])
            }
          }
        }
        parentArray.push(childArray)
      })
      return parentArray
    },
    //  获取人员列表
    async getList () {
      const { total, rows } = await getEmployeeList(this.pages)
      console.table(rows)
      this.total = total
      this.employees = rows
    },
    // 删除员工
    delPerson (id) {
      this.$confirm('确认删除吗？', '提示').then(async () => {
        // 确认
        console.log('确认')
        await delEmployee(id)
        this.$message.success('删除成功')
        /**
         * 解决问题：如果把最后一页数据删完了，页码显示正确的，但数据不对
         * 为什么不对？：最后一页没有数据了
         * 思路：
         * 1. 删除以后重新计算总页数=> total = (total-1)/pagesize
         * 2. 根据总页数和当前页码对比=》如果大于总页数=》向前进一页
         * 3. 如果数据删完了=》默认页码是1
         */
        const newTotal = Math.ceil((this.total - 1) / this.pages.size)
        // 比方说：newTotal = 8 ，但是this.pages.page = 9 =》需要改为最新的页码
        if (newTotal > 0) {
          this.pages.page = this.pages.page > newTotal ? newTotal : this.pages.page
        }

        this.getList()
      }).catch(console.log)
    },
    // 分页切换
    changePage (page) {
      this.pages.page = page
      this.getList()
    },
    // 每页显示条数切换
    sizeChange (sizes) {
      console.log(sizes)
      this.pages.size = sizes
      this.getList()
    },
    // 格式化函数
    formatEmployment (id) {
      /**
       * 思路：
       * 1. map对象=》存储字典映射关系数据
       * 2. 根据id获取字典数据
       */
      const maps = {}
      Els.hireType.forEach(item => {
        maps[item.id] = item.value
      })
      // debugger
      // console.log(maps)
      return maps[id]
    }
  }
}
</script>

<style lang="scss" scoped>
.round {
  width: 80px;
  height: 80px;
  border-radius: 100%;
}
</style>
